<template>
  <div class="step" v-if='sflag'>
    <div class="steptitle">
      <i class="fa fa-newspaper-o text-success" aria-hidden="true"></i>
      <span>做法步骤</span>
    </div>
    <table>
      <tr id="stepwhich">
        <p>请依次存放步骤1、2、3、4的步骤图：</p>
      </tr>
      <tr>
        <td>
          
          <div class="steptitleimg">
            <!--elementui的上传图片的upload组件-->
            <el-upload
              class="upload-demo"
              ref="upload"
              list-type="picture-card"
              action="http://localhost:3000/share/upmenusteps"
              :limit="4"
              :before-upload="beforeupload"
              :auto-upload="false"
              :multiple="true"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <img class="img" src="images/sharemenustep.PNG" alt />
        </td>
      </tr>
      <tr>
        <td>
          <hr>
          <div id="stepnumbertitle">步骤一：</div>
          <form action="#" id="imformation" :model="form"></form>
          <textarea name id cols="105" rows="8" form="imformation" placeholder="请填写制作步骤与技巧一" v-model="form.stepone"></textarea>
        </td>
      </tr>
      <tr>
        <td> 
          <hr>
          <div id="stepnumbertitle">步骤二：</div>
          <form action="#" id="imformation" :model="form"></form>
          <textarea name id cols="105" rows="8" form="imformation" placeholder="请填写制作步骤与技巧二" v-model="form.steptwo"></textarea>
        </td>
      </tr>
      <tr>
        <td>
          <hr>
          <div id="stepnumbertitle">步骤三：</div>
          <form action="#" id="imformation" :model="form"></form>
          <textarea name id cols="105" rows="8" form="imformation" placeholder="请填写制作步骤与技巧三" v-model="form.stepthree"></textarea>
        </td>
      </tr>
      <tr>
        <td>
          <hr>
          <div id="stepnumbertitle">步骤四：</div>
          <form action="#" id="imformation" :model="form"></form>
          <textarea name id cols="105" rows="8" form="imformation" placeholder="请填写制作步骤与技巧四" v-model="form.stepfour"></textarea>
        </td>
      </tr>
    </table>
    <button class="btn btn-success" form="imformation" @click.prevent='onSubmit'>提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      company_id: "",
      fileList: [],
      form: {
        // name: "", //绑定表单元素的属性
        stepone:'',
        steptwo:'',
        stepthree:'',
        stepfour:''
      },
      param: "" // 表单最后提交的参数对象
    };
  },
  props:['sflag','slocaluserid'],
  methods: {
    onSubmit() {
      let _this = this;
      _this.company_id=_this.slocaluserid;
      var stepones = _this.form.stepone;
      var steptwos = _this.form.steptwo;
      var stepthrees = _this.form.stepthree;
      var stepfours = _this.form.stepfour;
      console.log(_this.company_id)
      this.$refs.upload.submit();
      //将非表单元素的数据也添加到参数对象中；
      this.param.append("touserId", _this.company_id);
      //将表单元素的数据也添加到参数对象中；
      this.param.append("stepMake1", stepones);
      this.param.append("stepMake2", steptwos);
      this.param.append("stepMake3", stepthrees);
      this.param.append("stepMake4", stepfours);
      //设置提交请求头，适用于上传文件
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      // //调用接口，执行上传所有数据的操作
      this.$axios
        .post("http://localhost:3000/share/upmenusteps", this.param, config)
        .then(function(result) {
          // console.log(this.param)
          console.log("hhhhh", result);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //当上传文件组件submit之前触发执行
    beforeupload(file) {
      console.log('准备上传。。。。')
      // 准备表单上传需要的参数对象
      this.param = new FormData();
      this.fileList.push(file); // 把需要上传的文件保存到数组中
      // 遍历数组，把所有文件都保存到参数对象中
      for (let i = 0; i < this.fileList.length; i++) {
        this.param.append(`img_${i}`, this.fileList[i]);
      }
      console.log('hahahah',this.param)
      return false;
    }
  }
};
</script>
<style lang="css" scoped>
/* 步骤 */
.step {
  width: 100%;
  /* height: 900px; */
  background-color: rgba(245, 247, 242,0.5);
  /* border:1px solid blue; */
}
/* .step table tr {
  padding: 50px;
} */

.steptitle span {
  font-weight: bold;
}
.steptitleimg {
  width: 100%;
  height: 150px;
  /* border: 1px solid red; */
}
#stepwhich {
  width: 100px;
  height: 40px;
  /* border: 1px solid black; */
  line-height: 40px;
  color: grey;
  font-size: 12px;
}

#stepnumbertitle {
  width:100px;
  /* border: 1px solid red; */
  height: 40px;
  font-size: 20px;
  color: grey;
  font-weight: bold;
  line-height: 40px;
}
.step table tr td img {
  height: 180px;
  width: 180px;
}
</style>